<template>
  <div class="right-timelime">
    <el-row class="flex">
      <el-radio-group v-model="siteAttrs.isCurrentPage" size="small" class="margin-right-20" @change="onChangeAttrs">
        <el-radio-button :label="true">当前页</el-radio-button>
        <el-radio-button :label="false">全局页面设置</el-radio-button>
      </el-radio-group>
      <div class="margin-left-100">
        <el-checkbox v-model="siteAttrs.isPeripheralVisible" @change="onChangeAttrs">外围可见</el-checkbox>
        <el-checkbox v-if="isVisiblePhone" v-model="siteAttrs.isVisiblePhone" @change="onChangeAttrs">显示手机</el-checkbox>
        <el-checkbox v-else v-model="siteAttrs.isVisiblePhone" @change="onChangeAttrs" disabled>显示手机</el-checkbox>
      </div>
      <a href="https://www.yuque.com/volcaner/bq7g2d/001" target="_blank" class="help">帮助</a>
      <i v-if="siteStatus.isHighComponentConfiguration" class="jy-icon-down btn-fold" @click.stop="onFold"></i>
      <el-button class="margin-left-10" v-if="isDebug" @click.stop="onSaveCompData" size="small">保存组件数据</el-button>
    </el-row>
    <el-form class="el-form-item">
      <ul class="component-layer" v-if="isOpen && siteStatus.isHighComponentConfiguration" 
      @keydown.shift.exact="onKeyDownShift"
      @keyup.shift.exact="onKeyUpShift"
      tabindex="0">
        <li v-for="(item_, id) in getLayerAttrs" :key="id" @click.stop="onSelected(id)"
          :class="item_.isSelected ? 'seleted' : ''">
          <i :class="item_.isHidden ? 'jy-icon-view':'jy-icon-preview'" @click.stop="onEye(id)"></i>
          <i :class="item_.isLock ? 'jy-icon-locking':'jy-icon-unlock'" @click.stop="onLock(id)"></i>
          <span class="component-name"> {{item_.name}} </span>
          <input v-model="item_.id" class="timeline-input">
          <span class="component-text"> {{item_.text}} </span>
          <!-- <el-switch v-model="item_.oamm.isEdit" active-text="编辑" inactive-text="不能编辑" @change="onChangeOammAttr(item_.oamm)"></el-switch>
          <input v-model="item_.oamm.title" placeholder="运营标题" class="timeline-input timeline-input-title" @change="onChangeOammAttr(item_.oamm)"> -->
          <el-button class="btn-delete" type="primary" @click.stop.prevent="onDeleteComponent(id)">删除组件</el-button>
        </li>
      </ul>
    </el-form>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex'
import { PAGE_TYPE } from '@/common/const'
import { H5_TYPE } from '@/common/const-dif'
import { middle } from '@/views/js/middle'
import { loadUtils } from '@/components/utils/load-utils'
import { reactive } from 'vue'

export default {
  name: "RightTimeLine",
  components: {
  },
  mixins: [middle, loadUtils],
  setup () {
    const state =  reactive({
      isOpen: false,
      layerAttrs: {},
    })
    const state_ = {
      isDebug: process.env.NODE_ENV === 'production' ? false : true,
    }
    _.merge(state, state_)
    return state
  },
  created() {
    if(this.isDebug) {
      this.dynamicsLoadScript(this.env.publicPath + 'js/FileSaver.min.js', 'saveAs')
    }
  },
  computed: {
    ...mapState({
      components: (state) => state.components.currentPage.components,
      siteAttrs: state => _.cloneDeep(state.components.attrs),
      siteStatus: (state) => state.components.siteStatus,
      currentComponentData: (state) => state.components.currentComponentData
    }),
    isVisiblePhone(){
      if(this.siteAttrs.h5Type == H5_TYPE.pc || this.siteAttrs.h5Type == H5_TYPE.canvas){
        return false;
      }else{
        if(this.siteAttrs.pageType == PAGE_TYPE.single){
          return true;
        }else{
          return false;
        }
      }
    },
    getLayerAttrs(){
      let layerAttrs_ = _.cloneDeep(this.layerAttrs);
      _.forEach(this.layerAttrs, (item, key) => {
        delete this.layerAttrs[key]
      })
      _.forEach(this.components, (componnentData) => {
        /* eslint-disable */
        if(!layerAttrs_.hasOwnProperty(componnentData.id)){
          let text = componnentData.commonAttr.name || componnentData.commonAttr.text || componnentData.commonAttr.title || '';
          text = text.substr(0, 8);
          if(!text){
            text = componnentData.title
          }
          this.layerAttrs[componnentData.id] = {
            isSelected: false, 
            isHidden: false,
            isLock: false,
            name: componnentData.name,
            id: componnentData.id,
            text,
          }
          // Vue.set(this.layerAttrs, componnentData.id, {
          //   isSelected: false, 
          //   isHidden: false,
          //   isLock: false,
          //   name: componnentData.name,
          //   id: componnentData.id,
          //   text,
          //   oamm: _.cloneDeep(componnentData.oamm)
          // })
        }else{
          this.layerAttrs[componnentData.id] = layerAttrs_[componnentData.id]
          // Vue.set(this.layerAttrs, componnentData.id, layerAttrs_[componnentData.id])
        }
      })
      return this.layerAttrs
    }
  },
  methods: {
    ...mapActions({
      updateSiteStyles: "components/updateSiteStyles",
      updateSiteAttrs: "components/updateSiteAttrs",
      copyCurrentComponent: "components/copyCurrentComponent",
      isGroupCurrentComponent: "components/isGroupCurrentComponent",
      setActiveComponentId: "components/setActiveComponentId",
      // removeCurrentComponent: "components/removeCurrentComponent",
    }),
    onSaveCompData() {
      if(this.currentComponentData){
        let compData = JSON.stringify(this.currentComponentData);
        let blob = new Blob([compData], {type: "text/plain;charset=utf-8"});
        window.saveAs(blob, "jianye-comp-data.json");
      }else {
        this.$message("亲，你没有选中组件！")
      }
    },
    onChangeOammAttr(oamm){
      this.$store.commit("components/updateOammAttr", oamm);
    },
    onDeleteComponent(id){
      this.$store.commit("components/removeComponentById", id)
      // this.removeCurrentComponent();
    },
    onChangeAttrs(){
      this.updateSiteAttrs(this.siteAttrs);
    },
     onCopyComponent(){
      this.copyCurrentComponent()
    },
    onGroupComponent(){
      this.isGroupCurrentComponent(true);
    },
    onBreakupComponent(){
      this.isGroupCurrentComponent(false);
    },
    onFold(){
      this.isOpen = !this.isOpen
    },
    onSelected(id){
      if(this.layerAttrs[id].isLock){
        return
      }
      this.setSelected(id);

      if(this.layerAttrs[id].isSelected){
        this.setActiveComponentId({id})
      }else{
        this.setActiveComponentId({})
      }
    },
    setSelected(id){
      _.forEach(this.layerAttrs, (item) => {
        item.isSelected = false
      })
      this.layerAttrs[id].isSelected = !this.layerAttrs[id].isSelected
    },
    onEye(id){
      this.layerAttrs[id].isHidden = !this.layerAttrs[id].isHidden
      this.$store.commit("components/setComponentFrontAttr", {id, attr: {isHidden:this.layerAttrs[id].isHidden}})
    },
    onLock(id){
      this.layerAttrs[id].isLock = !this.layerAttrs[id].isLock
      if(!this.layerAttrs[id].isLock){
        this.setActiveComponentId({id})
      }else{
        this.setActiveComponentId({})
      }
      this.$store.commit("components/setComponentFrontAttr", {id, attr: {isLock:this.layerAttrs[id].isLock}})
    }
  },
  watch: {
    currentComponentData(){
      if(this.siteStatus.isHighComponentConfiguration && this.isOpen && this.currentComponentData && this.layerAttrs[this.currentComponentData.id]){
        this.setSelected(this.currentComponentData.id)
      }
    }
  }
};
</script>

<style lang="scss">
.right-timelime {
  position: absolute;
  bottom: 0;
  right: 0;
  left: 0;
  text-align: left;
  background-color: #f3f5fa;
  padding: 4px 0;

  .el-form-item{
    margin: 0;
    padding: 0;
  }

  i{
    margin-right: 10px;
    font-size: 16px;
  }

  .timeline-input, .timeline-input-title{
    width: 260px;
    display: inline-block;
    padding: 0 4px;
    font-size: 12px;
    text-align: center;
    margin: 0 10px
  }
  .timeline-input-title{
    width: 160px;
  }

  .flex{
    display: flex;
    flex-direction: row;
    justify-content: center;
  }
  .btn-fold{
    font-size: 12px;
    display: inline-block;
    line-height: 2.4;
    align-self:flex-end;
    margin-left: 30px
  }
  .help{
    font-size: 12px;
    display: inline-block;
    line-height: 3.4;
    margin-left: 30px;
  }
  .btn-copy{
    margin-left: 20px;
  }

  .el-button {
    padding: 6px 18px;
    border-radius: 0;
    font-size: 12px;
  }
  .el-radio-button:first-child .el-radio-button__inner,
  .el-radio-button:last-child .el-radio-button__inner,
  .el-radio-button__inner,
  .el-checkbox-button:first-child .el-checkbox-button__inner,
  .el-checkbox-button:last-child .el-checkbox-button__inner{
    padding: 8px 18px;
    font-size: 12px;
  }
  .el-radio-button:first-child .el-radio-button__inner{
    border-top-left-radius: 2px;
    border-bottom-left-radius: 2px;

  }
  .el-radio-button:last-child .el-radio-button__inner{
    border-top-right-radius: 2px;
    border-bottom-right-radius: 2px;

  }
  .margin-left-100{
    margin-left: 100px;
  }
  
  .el-checkbox{
    line-height: 30px;
  }

  .component-layer{
    width: 100%;
    margin-top: 8px;
    padding-top: 1px;
    padding-bottom: 1px;
    background-color: #fff;
    max-height: 200px;
    overflow-y: auto;

    .btn-delete{
      margin-left: 20px;
    }

    li{
      margin: 4px;
      background-color: #f3f5fa;
      padding: 2px 4px;
      position: relative;
      line-height: 28px;
      display: flex;
      justify-items: flex-end;
      justify-content: flex-end;
      align-items: center;

      span{
        font-size: 12px;
      }

      .component-name{
        width: 70px;
      }
      .component-text{
        width: 140px;
      }
    }
    li.seleted{
      background-color: aquamarine;
    }
  }
  
}
</style>
